<!--
Par Wadii Chemkhi GL2 - G1
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            var prix = new Array();
            prix["aucun"]=0;
            prix["soupe"]=1.4;
            prix["salade"]=1.2;
            prix["couscous"]=5.2;
            prix["spaguetti"]=6.200;
            prix["pizza"]=5.6;
            prix["Glace"]=2;
            prix["Chaucola"]=1.800;
            prix["Vanille"]=1.500;
            
            function corrigerNaN(){
                if(isNaN(document.getElementById("nentree").value)){
                    document.getElementById("nentree").value=0;
                }
                
                if(isNaN(document.getElementById("nplat").value)){
                    document.getElementById("nplat").value=0;
                }
                
                if(isNaN(document.getElementById("ndessert").value)){
                    document.getElementById("ndessert").value=0;
                }
                
            }
            
            function corrigerNB(){
                if(prix[document.getElementById("entree").value]&&(parseInt(document.getElementById("nentree").value)==0)){
                    document.getElementById("nentree").value=1;
                }else{document.getElementById("nentree").value=0;}
                
                if(prix[document.getElementById("plat").value]&&(parseInt(document.getElementById("nplat").value)==0)){
                    document.getElementById("nplat").value=1;
                }
                
                if(prix[document.getElementById("dessert").value]&&(parseInt(document.getElementById("ndessert").value)==0)){
                    document.getElementById("ndessert").value=1;
                }
                
            }
          
            function miseAJour(){
                corrigerNaN();
                corrigerNB();
                var somme=0;
                somme+=prix[document.getElementById("entree").value] * (parseInt(document.getElementById("nentree").value)||0);
                somme+=prix[document.getElementById("plat").value] * (parseInt(document.getElementById("nplat").value)||0);
                somme+=prix[document.getElementById("dessert").value] * (parseInt(document.getElementById("ndessert").value)||0);
                document.getElementById("prix").value=somme;
            }
            function VerifierCommande(){
                if(parseInt(document.getElementById("prix").value)==0){
                    alert("On ne peut pas passer une commande si on ne prend ni entrée, ni plat, ni dessert");
                }
                
                return AdresseValide(document.getElementById("email").value)
                    && (parseInt(document.getElementById("prix").value)!=0)
                    && (! isNaN(document.getElementById("nentree").value))
                    && (! isNaN(document.getElementById("nplat").value))
                    && (! isNaN(document.getElementById("ndessert").value));
            }
            function AdresseValide(email) { 
                //cette methode de verification par expression regulière est 
                //copiée a partir de http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
                var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                var bool = re.test(email);
                if(!bool){
                    alert("L'Email que vous avez entrer n'est pas valide")
                }
                return bool;
            } 
            
            function passerCommande(){
                if(VerifierCommande()){
                    document.forms[0].action="mailto:wadi.chemkhi.com;"+document.getElementById("email").value;
                    document.forms[0].submit();
                }
            }
            
        </script>

    </head>
    <body>
        <form>
        <table align="center" >
            <tr style="font-size: 28px ;color: red;background-color: gray">
                <td colspan="6">
                    <b> Votre Commande</b></td>
            </tr>
            <tr>
                <td>Entrée</td>
                <td><select id="entree" onchange="miseAJour();">
                        <option value="aucun">aucun</option>
                        <option value="soupe">soupe</option>
                        <option value="salade">salade</option>

                    </select></td>
                <td>pour</td>
                <td><input id="nentree" type="text" value="0" size="3" onchange="miseAJour();"></td>
                <td>personnes</td>
                <td rowspan="2" style="font-size: 25px"><b>Prix</b> </td>
            </tr>

            <tr>
                <td>Plat</td>
                <td><select id="plat" onchange="miseAJour();">
                        <option value="aucun">aucun</option>
                        <option value="couscous">couscous</option>
                        <option value="spaguetti">spaguetti</option>
                        <option value="pizza">pizza</option>

                    </select></td>
                <td>pour</td>
                <td><input id="nplat" type="text" value="0" size="3" onchange="miseAJour();"></td>
                <td>personnes</td>



            </tr>

            <tr >
                <td>Dessert</td>
                <td><select id="dessert" onchange="miseAJour();">
                        <option value="aucun">aucun</option>
                        <option value="Glace">Glace</option>
                        <option value="Chaucola">Chaucola</option>
                        <option value="Vanille">Vanille</option>

                    </select></td>
                <td>pour</td>
                <td><input id="ndessert"  type="text" value="0" size="3" onchange="miseAJour();"></td>
                <td>personnes</td>
                <td><input id="prix" type="text" value="0" size="8" READONLY></td>
            </tr>
            <tr>
                <td align="center"  colspan="6">
                    <textarea id="email" cols="50" rows="4"  ></textarea>
                    <br>
                    <input type="button" value="Commander" onclick="passerCommande();">
                </td>
            </tr>
        </table>
        </form>
    </body>
</html>
